<template>
  <div class="showBigImageDialog__container">
    <el-dialog v-model="dialogVisible" title="查看图片" draggable width="50%">
      <div class="showBigImageDialog__body__container">
        <div class="body__list__container">
          <div class="list__item__container" v-for="img in imgList" :key="img">
            <el-image
              style="width: 240px; height: 240px"
              :src="img"
              fit="cover"
              :previewSrcList="imgList"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="ShowBigImageDialog">
const dialogVisible = ref(false);
let imgList = ref<Array<string>>([]);
const handleOpen = (imgListParam: string[] = []) => {
  dialogVisible.value = true;
  imgList.value = imgListParam;
};
defineExpose({
  handleOpen,
});
</script>

<style lang="scss" scoped>
.showBigImageDialog__container {
  .showBigImageDialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
    .body__list__container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .list__item__container {
        padding: 2px;
        border: 1px solid var(--el-border-color);
        border-radius: 4px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
